<template>
	<view class="ba-container">
		<template v-for="item in messageData">
			<view class="doctor-info">
				<view style="display: flex;">
					<view style="margin-right: 20rpx; width: 88rpx; height: 88rpx;background-color: rgba(41, 132, 248, 0.0980392156862745);border-radius: 12px;" class="flex-ct">
						<image :src="item.img" style="width: 36rpx; height: 36rpx;"></image>
					</view>
					<view>
						<view class="">
							<span>{{item.name}}</span>
						</view>
						<span style="font-size: 12px;color: #999999;margin-left: 10rpx;">
						{{item.info}}
						</span>
					</view>
				</view>
				
				<view class="">
					<image src="/static/right.png" style="width: 14rpx;height:20rpx"></image>
				</view>
			</view>
			
		</template>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';


	const messageData = ref([{
			img: '/static/cc-message.png',
			name: '在线咨询',
			info: '查看和医生的聊天消息'
		},
		{
			img: '/static/servicetx.png',
			name: '服务消息',
			info: '签约与服务相关提醒'
		},
		{
			img: '/static/setting.png',
			name: '系统消息',
			info: '系统消息提醒'
		}
	]);
</script>

<style scoped lang="scss">
	.ba-container {
		min-height: 100vh;
		background-color: aliceblue;
		display: flex;
		flex-direction: column;
		padding: 20rpx 40rpx;
	}
	.doctor-info {
		width: 590rpx;
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 22rpx;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}
</style>